<template>
  <!-- 列表 -->
  <div class="table">
    <TableList :tableData="tableData" :tableConfig="tableConfig" @selectAll="selectAll" @freshTableData="getData">
      <template slot="expand" slot-scope="scope">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="姓名">
            <span>{{ scope.row.name }}</span>
          </el-form-item>
          <el-form-item label="年龄">
            <span>{{ scope.row.age }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <span>{{ scope.row.sex }}</span>
          </el-form-item>
          <el-form-item label="职业">
            <span>{{ scope.row.job }}</span>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{ scope.row.email }}</span>
          </el-form-item>
        </el-form>
      </template>
      <template slot="状态" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.status == 0">编辑中</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.status == 1">待审核</el-tag>
        <el-tag size="mini" type="warning" v-else-if="scope.row.status == 2">待发布</el-tag>
        <el-tag size="mini" type="info" v-else-if="scope.row.status == 3">已完成</el-tag>
      </template>
    </TableList>
  </div>
</template>

<script>
import TableList from '@/commont/plugins/customTable.vue'
import Pagination from '@/commont/plugins/pagination.vue'
import { requestTestMock } from '@/api/api'
export default {
  name: "demo3",
  components: { TableList, Pagination },
  props: {},
  data() {
    return {
      // 列表
      tableData: {
        columns: [
          { title: 'ID', prop: 'id', width: '180', align: 'center' },
          { title: '姓名', prop: 'name', width: '150', align: 'center' },
          { title: '年龄', prop: 'age', width: '80', align: 'center' },
          { title: '性别', prop: 'sex', width: '80', align: 'center' },
          { title: '职业', prop: 'job', width: '150', align: 'center' },
          { title: '技能等级', prop: 'tops', width: '150', align: 'center' },
          { title: '邮箱', type: 'link', prop: 'email', width: '', align: 'center', click: this.lookInfo },
          { title: '状态', type: 'slot', prop: 'status', width: '100', align: 'center' },
          {
            title: '操作', type: 'btn', width: '160', align: 'center',
            btns: [
              { label: '编辑', btn: true, click: this.handleEdit, visible: false },
              { label: '预览', btn: true, click: this.handlePreview, visible: false },
              { label: '删除', btn: true, click: this.handleDelete, visible: false },
              { label: '审核', btn: true, click: this.handleAudit, visible: false },
            ],
          },
        ],
        data: [],
        total: 0,
        pageSize: 10,//显示数量
        currentPage: 1, //当前页 默认显示第一页
        sizeOpts: [10, 20, 30, 40]
      },
      tableConfig: {
        typeName: 'expand', //多选:multiple  单选:single  展开行:expand
      },
      selectedArrData: [],
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    formatter(val) {
      let title = "";
      if (val.status == 0) {
        title = "编辑中";
      } else if (val.status == 1) {
        title = "待审核";
      } else if (val.status == 2) {
        title = "待发布";
      } else if (val.status == 3) {
        title = "已完成";
      }
      return title
    },
    // 请求数据
    getData(params) {
      if (typeof params === 'object') { Object.assign(this.tableData, params) };
      let param = {
        currentPage: this.tableData.currentPage,
        pageSize: this.tableData.pageSize,
      }
      requestTestMock(param, 'selectByPage').then(res => {
        console.log(res);
        if (res.code == 200) {
          this.tableData.data = res.rows;
          this.tableData.total = res.total;
        }
      })
    },
    // 多选
    selectAll(data) {
      console.log('多选', data);
    },
    // 编辑
    handleEdit(idx, item) {
      console.log('编辑', item);
    },
    // 预览
    handlePreview(idx, item) {
      console.log('预览', item);
    },
    // 删除
    handleDelete(idx, item) {
      console.log('删除', item);
    },
    // 审核
    handleAudit(idx, data) {
      console.log('审核', data);
    },
    // 链接
    lookInfo(data) {
      console.log('链接', data);
    },
  },
}
</script>

<style lang="less" scoped></style>